<template>
  <div class='container'>
    <el-dialog
     title="题目预览"
     :visible.sync="dialogVisible"
      width="55%"
      :before-close="handleClose">
        <el-descriptions :column="4">
          <el-descriptions-item label="【题型】">
           <span v-if="questionItem.questionType === '1'">单选题</span>
           <span v-else-if="questionItem.questionType === '2'">多选题</span>
           <span v-else>简答题</span>
          </el-descriptions-item>
          <el-descriptions-item label="【编号】">{{ questionItem.id }}</el-descriptions-item>
          <el-descriptions-item label="【难度】">
            <span v-if="questionItem.difficulty === '1'">简单</span>
            <span v-else-if="questionItem.difficulty === '2'">简单</span>
            <span v-else>困难</span>
          </el-descriptions-item>
          <el-descriptions-item label="【标签】">{{ questionItem.tags }}</el-descriptions-item>
          <el-descriptions-item label="【学科】">{{ questionItem.subjectName }}</el-descriptions-item>
          <el-descriptions-item label="【目录】">{{ questionItem.directoryName }}</el-descriptions-item>
          <el-descriptions-item label="【方向】">{{ questionItem.direction }}</el-descriptions-item>
        </el-descriptions>
        <hr>
        <el-row>
        <el-col>
          <span>【题干】：</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="color:blue;">
          <div v-html="questionItem.question"></div>
        </el-col>
      </el-row>
          <span v-if="questionItem.questionType === '1'">单选题 选项：（以下选中的为正确答案）</span>
          <span v-else-if="questionItem.questionType === '2'">多选题 选项：（以下选中的为正确答案）</span>
          <span v-else></span><br>
          <!-- 单选 -->
            <el-radio-group v-model="radio" v-if="questionItem.questionType === '1'" >
              <el-row v-for="(item,index) in questionItem.options" :key="index">
                <el-radio :label="item.code">{{item.title}}</el-radio>
              </el-row>
            </el-radio-group>

          <!-- 多选 -->
           <el-checkbox-group v-model="checkList" v-else-if="questionItem.questionType === '2'">
            <el-row v-for="(item,index) in questionItem.options" :key="index">
              <el-checkbox :label="item.code" >{{item.title}}</el-checkbox>
            </el-row>
          </el-checkbox-group>
          <!-- 简答 -->
          <div v-else></div>
          <hr>
          <!-- 参考答案 -->
          <el-row>
        <el-col>
          <span>【参考答案】：</span>
          <el-button type="danger" size="small" @click="$refs.video.style.display = 'block'">视频预览按钮</el-button>
        </el-col>
      </el-row>
      <!-- 视频 -->
      <div ref="video" class="video">
        <video :src="questionItem.videoURL" controls width="50%" height="100%"></video>
      </div>
      <hr>
      <!-- 答案解析 -->
       <div class="abc">
        <span>【答案解析】：</span>
        <div v-html="questionItem.answer"></div>
      </div>
      <hr>
      <!-- 题目备注 -->
       <el-row>
        <el-col>
          <span>【题目备注】：{{questionItem.remarks}}</span>
        </el-col>
      </el-row>
        <!-- 底部的按钮 -->
        <span slot="footer" class="dialog-footer" >
          <el-button @click="dialogVisible = false" type="primary">关闭</el-button>
        </span>
</el-dialog>
  </div>
</template>

<script>
export default {}
</script>

<style scoped lang='scss'>
.video{
  display: none;
  height: 300px;
}
.hang{
  display: inline-block;
}
.abc{
  display:flex;
  align-items: center;
  // div{
  //   display: inline-block !important;
  // }
}</style>
